<template>
  <div class="app-container">
    <el-tabs v-model="activeName"  >
      <el-tab-pane label="半岁增量对比" name="first">
        <div id="halfYearCharts" v-loading="loading" :style="{width: '700px', height: '300px'}"></div>
      </el-tab-pane>
      <el-tab-pane label="整岁增量对比" name="second">
        <div id="wholeYearCharts" v-loading="loading" :style="{width: '700px', height: '300px'}"></div>
      </el-tab-pane>
    </el-tabs>

    <p></p>
    <div>实测身高增量与遗传身高增量的对比，更容易发现孩子长得慢的后天问题。加强孩子运动、饮食、睡眠、情绪等后天因素的管理，更有利于孩子长高。</div>
    <div style="margin-top:30rpx">孩子身高在全年中并非匀速生长，其中3-5月份身高长得最快。请以整岁增量作为判定标准，半岁增量仅作参考。</div>
  </div>
</template>

<script>
import { listChildHeightIncrementalComparisonCharts } from "@/api/child/height";

import echarts from "echarts";

export default {
  name: "heightIncrementalComparison",
  props: {
    childId: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    childData: {
      type: Object,
      default: () => {
        return {
          ageNum: undefined,
          avatar: undefined,
          birthday: undefined,
          childId: undefined,
          childType: 1,
          familyCode: undefined,
          height: 0,
          heightDad: 0,
          heightInherit: 0,
          heightMum: 0,
          nickname: undefined,
          sex: 1,
          weight: 0
        };
      }
    }
  },

  data() {
    return {
      activeName: 'first',
      loading: false,
      reportComment: ""
    };
  },

  mounted() {
    this.getChartData();
  },
  watch: {
    //监听子控件内容的改动,发送给父级组件
    childId: {
      handler(newValue, oldValue) {
        this.getChartData();
      },
      deep: true
    }
  },
  methods: {
    getChartData() {
      this.loading = true;
      let halfYearData = [];
      let wholeYearData = [];
      listChildHeightIncrementalComparisonCharts(this.childId).then(
        response => {
          this.loading = false;
          halfYearData = response.data.halfYear;
          wholeYearData = response.data.wholeYear;

          // 基于准备好的dom，初始化echarts实例
          this.halfYearchart = echarts.init(
            document.getElementById("halfYearCharts")
          );
          this.wholeYearchart = echarts.init(
            document.getElementById("wholeYearCharts")
          );

          let halfYearOption = {
            color: ["#83c628", "#bfe190"],
            legend: {
              data: ["实测增量", "遗传增量"],
              bottom: 0
            },
            tooltip: {
              trigger: "axis",
              position: { right: 10, top: 30 },
              formatter: function(params) {
                let list = params.length;
                let txt = params[0].name + "岁\n";
                for (var i = 0; i < list; i++) {
                  if (i < list - 1) {
                    txt += `${params[i].seriesName}:${
                      params[i].data == 0 ? "无数据" : params[i].data + "cm"
                    }\n`;
                  } else {
                    txt += `${params[i].seriesName}:${
                      params[i].data == 0 ? "无数据" : params[i].data + "cm"
                    }`;
                  }
                }
                return txt;
              }
            },
            grid: {
              top: "9%",
              left: "8%",
              right: "6%",
              bottom: "18%"
            },
            yAxis: [
              {
                type: "value",
                name: "CM",
                axisLine: {
                  lineStyle: {
                    color: "#999"
                  }
                },
                nameTextStyle: {
                  padding: [0, 22, 0, 0],
                  color: "#4b4b4b",
                  fontSize: 11
                },
                splitLine: {
                  lineStyle: {
                    color: ["rgba(204,204,204,0.4)"],
                    type: "dotted"
                  }
                }
              }
            ],
            xAxis: [
              {
                type: "category",
                name: "岁",
                nameGap: 0,
                nameTextStyle: {
                  padding: [29, 0, 0, 0],
                  color: "#4b4b4b",
                  fontSize: 11
                },
                axisTick: { show: false },
                axisLabel: {
                  color: "#666"
                },
                data: halfYearData.age
              }
            ],
            series: [
              {
                name: "实测增量",
                type: "bar",
                barGap: 0,
                label: {
                  normal: {
                    show: false,
                    position: "inside"
                  }
                },
                data: halfYearData.measuredIncremental,
                itemStyle: {
                  // emphasis: {
                  //   color: '#37a2da'
                  // }
                }
              },
              {
                name: "遗传增量",
                type: "bar",
                label: {
                  normal: {
                    show: false,
                    position: "inside"
                  }
                },
                data: halfYearData.inheritIncremental,
                itemStyle: {
                  // emphasis: {
                  //   color: '#37a2da'
                  // }
                }
              }
            ]
          };
           let wholeYearOption = {
            color: ["#83c628", "#bfe190"],
            legend: {
              data: ["实测增量", "遗传增量"],
              bottom: 0
            },
            tooltip: {
              trigger: "axis",
              position: { right: 10, top: 30 },
              formatter: function(params) {
                let list = params.length;
                let txt = params[0].name + "岁\n";
                for (var i = 0; i < list; i++) {
                  if (i < list - 1) {
                    txt += `${params[i].seriesName}:${
                      params[i].data == 0 ? "无数据" : params[i].data + "cm"
                    }\n`;
                  } else {
                    txt += `${params[i].seriesName}:${
                      params[i].data == 0 ? "无数据" : params[i].data + "cm"
                    }`;
                  }
                }
                return txt;
              }
            },
            grid: {
              top: "9%",
              left: "8%",
              right: "6%",
              bottom: "18%"
            },
            yAxis: [
              {
                type: "value",
                name: "CM",
                axisLine: {
                  lineStyle: {
                    color: "#999"
                  }
                },
                nameTextStyle: {
                  padding: [0, 22, 0, 0],
                  color: "#4b4b4b",
                  fontSize: 11
                },
                splitLine: {
                  lineStyle: {
                    color: ["rgba(204,204,204,0.4)"],
                    type: "dotted"
                  }
                }
              }
            ],
            xAxis: [
              {
                type: "category",
                name: "岁",
                nameGap: 0,
                nameTextStyle: {
                  padding: [29, 0, 0, 0],
                  color: "#4b4b4b",
                  fontSize: 11
                },
                axisTick: { show: false },
                axisLabel: {
                  color: "#666"
                },
                data: wholeYearData.age
              }
            ],
            series: [
              {
                name: "实测增量",
                type: "bar",
                barGap: 0,
                label: {
                  normal: {
                    show: false,
                    position: "inside"
                  }
                },
                data: wholeYearData.measuredIncremental,
                itemStyle: {
                  // emphasis: {
                  //   color: '#37a2da'
                  // }
                }
              },
              {
                name: "遗传增量",
                type: "bar",
                label: {
                  normal: {
                    show: false,
                    position: "inside"
                  }
                },
                data: wholeYearData.inheritIncremental,
                itemStyle: {
                  // emphasis: {
                  //   color: '#37a2da'
                  // }
                }
              }
            ]
          };

          this.halfYearchart.setOption(halfYearOption);
          this.wholeYearchart.setOption(wholeYearOption);
        }
      );
    }
  }
};
</script>